import { Button, ComboboxData, Input, Select, Se } from '@mantine/core'
import { useState } from 'react'

interface UnitInputOpts {
  defaultUnitValue?: string,
  defaultValue?: string,
  unitOpts?: ComboboxData
}

export default function UnitInput({
  unitOpts,
  defaultValue,
  defaultUnitValue,
}: UnitInputOpts) {
  const [unit, setUnit] = useState<string | undefined>(defaultUnitValue);
  const [value, setValue] = useState<string | undefined>(defaultValue);



  return (
    <div>

      <div className='flex'>
        
        <Input className='w-[100px]' defaultValue={defaultValue} size='xs' onChange={(evt) => setValue(evt.target.value)}  />

        <Select 
        size='xs' 
        allowDeselect
        className='w-[80px]'
        defaultValue={defaultUnitValue} 
        onChange={(value) => value && setUnit(value)} 
        data={unitOpts} />
      </div>
      <div className='flex justify-end pt-4'>
        <Button size="xs" variant="light" >确认</Button>
      </div>
    </div>
  )
}